<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
    <title>流量统计</title>
    
    <%@ include file="../common.jsp" %>
	<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${path }/static/highcharts/js/highcharts.js"></script>
  </head>

  <body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active"/>
	</jsp:include>
  	
    <div class="container-fluid">
      <div class="row">
      	<div class="col-sm-3 col-md-2 sidebar">
			<jsp:include page="left_navbar.jsp">
				<jsp:param value="8" name="active"/>
			</jsp:include>
		</div>
		
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
          <h3 class="page-header">流量统计</h3>
          <div class="row">
          	<div class="col-sm-12">
          		
                <label class="form-inline">采集点: 
					<select class="form-control" name="deviceNo" id="deviceNo">
						<option value="">选择采集点</option>
					</select>
				</label>
				
				&emsp;&emsp;
                <label class="form-inline">日期:
                	<input name="selectDate" id="selectDate" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly />
               	</label>
               	<!-- 
               	&emsp;&emsp;
                <label class="form-inline">结束时间:
                	<input name="endTime" id="endTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
               	</label>
               	 -->
               	&emsp;&emsp;
               	<button type="button" class="btn btn-info" onclick ="getStat();">&nbsp;检索&nbsp;</button>
           	</div>
		  </div>
          
          <br/>

          <div id="container" style="min-width: 300px; height: 400px; margin: 0 auto;margin-top:10px;">
           
          </div>
          
        </div>
      </div>
    </div>
  	
	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		$(document).ready(function() {
			var defaultDate = dateForm(new Date(), 'yyyy-MM-dd');
			$("#selectDate").val(defaultDate);
			initDevices();
			getStat();
		});
		
		//初始化下拉菜单
		function initDevices(){
			
		    $.ajax({
		        type: "post",
		        url: "${path }/dev/getAllDevices",
		        success: function(data) {
					$("#deviceNo").empty();
					$("#deviceNo").append("<option value= '' > 所有  </option>");
					if (data.devices.length > 0) {
						//解析数组
	                    $.each(data.devices,function(i, item) {
	                        $("#deviceNo").append("<option value=" + item.devNo + "  >" + item.devName + "</option>");
	                    });
					} else {
						$("#deviceNo").append("<option value= '' >加载失败</option>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		function chart(data,totalCount) {
			$('#container').highcharts({
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: '共计采集设备 ' + totalCount +" 个"
		        },
		        //subtitle: {
		        //    text: '共计采集设备 ' + totalCount +" 个"
		       // },
		        credits: {
		        	enabled:false
		        },
		        exporting: {
		        	enabled:false
		        },
		        xAxis: {
		            type: 'category',
		            labels: {
		                rotation: -45,
		                style: {
		                    fontSize: '13px',
		                    fontFamily: 'Verdana, sans-serif'
		                }
		            }
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: '采集设备数'
		            }
		        },
		        legend: {
		            enabled: false
		        },
		        tooltip: {
		            pointFormat: '采集设备 <b>{point.y} 个</b>'
		        },
		        series: [{
		            name: '出现个数',
		            data: data,
					dataLabels : {
						enabled : true,
						rotation : -90,
						color : '#FFFFFF',
						align : 'right',
						format : '{point.y}', // one decimal
						y : 10, // 10 pixels down from the top
						style : {
							fontSize : '13px',
							fontFamily : 'Verdana, sans-serif'
						}
					}
				} ]
			});
		}

		function getStat() {
			var deviceNo = $("#deviceNo").val();
			var selectDate = $("#selectDate").val();
			$.ajax({
				type: 'post',
				url:"${path }/data/cartogramData",
				data:{
					"deviceNo" : deviceNo,
					"selectDate" : selectDate
				},
				success : function(data) {
					var array = [];
					for(var key in data.dataInfo) {
						if(data.dataInfo.hasOwnProperty(key)) {
							var s = {
								name: data.dataInfo[key].hour +" 时",
								y: data.dataInfo[key].count,
								//events: {
								//	click: function(e) {
										//showInfo(this.name);
								//	}
								//}
							};
							array.push(s);
						}
					}
					//console.log(array);
					chart(array,data.totalCount);
				},
				error : function(error) {
					console.log("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
	</script>
</body></html>